<!--
 * @Descripttion: 
 * @version: 
 * @@Company: DCIT-SH
 * @Author: 王富银
 * @Date: 2024-08-16 22:32:41
 * @LastEditors: Sunny Chen
 * @LastEditTime: 2024-08-20 22:47:39
-->

<template>
    <div class="Echarts-container" ref="echartsContainer"></div>
  </template>
  
  <script setup>
  import { onMounted, ref } from "vue";
  import * as echarts from "echarts";
  const echartsContainer = ref(null);
  onMounted(() => {
    const myChart = echarts.init(echartsContainer.value, "dark");
    const option = {
      title: {
        text: "上周骑行次数",
      },
      grid: {
        left: "7%",
        right: "7%",
        bottom: "5%",
        top: "17%",
        containLabel: true,
      },
      xAxis: {
        type: "category",
        data: ['周一','周二','周三','周四','周五','周六','周七'],
        axisTick: {
          show: false,
        },
      },
      yAxis: {
        type: "value",
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
      },
      legend: getLegend(),
      series: [
        {
          name: "次数",
          data: [25, 20, 15, 38, 40,34,22],
          type: "bar",
          itemStyle:{
            color:"green",
          },
          barWidth:15,
          label:{
            show:true,
            verticalAlign:'top',
            align:"center",
          }
        },
      ],
    };
    myChart.setOption(option);
  });
  const getLegend = () => {
    return {
      data: ['次数'],
      icon: "rect",
      orient: "horizontal",
      left: "right",
      itemWidth: 12,
      itemHeight: 12,
      textStyle: {
        color: "#fff",
        fontSize: "12px",
      },
    };
  };
  </script>
  <style scoped>
  .Echarts-container {
    height: 205px;
    padding: 10px;
  }
  </style>
  